<template>
  <div class="complaints">
    <Resize>
      <template v-slot:left>
        <div class="complaints_l">
          <!-- <vxe-toolbar>
        <template #buttons>
          <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">全部展开</vxe-button>
          <vxe-button @click="$refs.xTree.clearTreeExpand()">全部关闭</vxe-button>
        </template>
      </vxe-toolbar> -->
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              rowField: 'depId',
              children: 'departmentList',
              parentKey: 'siteId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
              reserve: true,
              accordion: true,
            }"
            class="left-table"
          >
            <vxe-column tree-node field="name" show-overflow>
              <template #default="{ row }">
                <span>
                  <span
                    v-if="false && row.siteId == currentRowId"
                    class="activeRow"
                  >
                    <svg-icon icon-class="right" style="color: #009a94" />
                  </span>
                  <!-- 电脑 -->
                  <img
                    src="../../../assets/icons/png/Display Check.png"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.root == '000'"
                  />
                  <!-- 地球 -->
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="vertical-align: bottom"
                    v-if="!row.depId && row.root != '000'"
                  />

                  <img
                    src="../../../assets/icons/png/role.gif"
                    alt=""
                    style="verticalalign: text-bottom"
                    v-if="row.depId"
                  />
                  <span
                    @click="clickListRow(row)"
                    style="cursor: pointer; fontsize: 12px; color: #000"
                  >
                    {{ row.siteName || row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="complaints_r">
          <div v-if="siteRow || depRow">
            <el-row :gutter="10" class="mb8 grid-content grid-content">
              <el-col :span="15">
                <span style="height: 30px; line-height: 30px"
                  >投稿统计 >>
                  <font color="red">{{
                    (depRow && depRow.name) || siteRow.siteName
                  }}</font> </span
                >下的投稿部门{{ siteRow ? "分类" : "列表" }}
              </el-col>
              <el-col :span="2" :offset="6">
                <el-button
                  type="cyan"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                  v-hasPermi="['system:department:add']"
                  >{{ depRow ? "新增部门" : "新增类别" }}</el-button
                >
              </el-col>
            </el-row>
            <el-table :data="rightTable">
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column
                label="ID"
                prop="depId"
                width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column
                :label="depRow ? '部门名称' : '类别名称'"
                align="center"
                prop="name"
              />

              <el-table-column
                :label="depRow ? '部门描述' : '类别描述'"
                align="center"
                prop="deptDesc"
              />

              <el-table-column
                label="删除"
                align="center"
                width="120"
                class-name="small-padding  "
              >
                <template slot-scope="scope" v-if="scope.row.userId !== 1">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleEdit(scope.row)"
                    v-hasPermi="[
                      'system:department:edit',
                      'system:department:query',
                    ]"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDel(scope.row)"
                    v-hasPermi="[
                      'system:department:remove',
                      'system:dict:remove',
                    ]"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            “部门管理”是WYCMS系统的主要功能模块，是用来增加、修改、删除wycms系统下的投稿部门。
          </div>
        </div>
      </template>
    </Resize>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="cancel"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属类别:" prop="parentId" v-if="form.parentId">
          <el-select v-model="form.parentId">
            <el-option
              :label="item.name"
              :value="item.depId"
              v-for="item in subDepOption"
              :key="item.depId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="depRow ? '部门序号' : '类别序号'" prop="sequence">
          <el-input-number
            v-model="form.sequence"
            :min="1"
            :max="100"
            :label="depRow ? '部门序号' : '类别序号'"
          ></el-input-number>
          <!-- <el-input v-model="form.sequence" /> -->
        </el-form-item>
        <el-form-item :label="depRow ? '部门名称' : '类别名称'" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="depRow ? '部门名称' : '类别名称'"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item :label="depRow ? '部门描述' : '类别描述'" prop="deptDesc">
          <el-input
            type="textarea"
            :rows="2"
            v-model="form.deptDesc"
            :placeholder="depRow ? '部门描述' : '类别描述'"
            maxlength="40"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="cyan" @click="reset">重 置</el-button>
        <el-button type="cyan" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { objectMerge } from "@/utils/index";
import { editsite, addSite, listSite } from "@/api/content/net";
import {
  listDepAll,
  listDep,
  subList,
  getDepInfo,
  delDepLeft,
  delDepRight,
  departmentEdit,
  departmentAdd,
} from "@/api/extendApplication/complaints.js";
export default {
  name: "complaints",
  data() {
    return {
      //添加或修改文件夹对话框
      title: null,
      open: false,
      //文件夹属性表单
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: "名称不能为空",
          },
        ],
        sequence: [{ required: true, message: "序号不能为空" }],
      },
      siteList: [],
      subDepOption: [],
      siteRow: null,
      rowCache: null,
      depRow: null,
      rightRow: null,
      rightTable: [],
    };
  },

  components: {},

  computed: {
    currentRowId() {
      return this.siteRow?.siteId;
    },
  },

  mounted() {
    this.getLeftList();
  },
  watch: {},
  methods: {
    getLeftList() {
      listDepAll()
        .then((res) => {
          if (res.code == 200) {
            // this.$refs.xTree.loadData(res.data);
            res.data.unshift({ name: "WYCMS投稿部门管理", root: "000" });
            this.siteList = res.data;
          }
        })
        .then(() => {
          // let index = this.getTreeExpand();
          this.$nextTick(() => {
            let index = this.siteList.findIndex((item) => {
              return this.siteRow ? item.siteId == this.siteRow.siteId : 0;
            });
            index = index > 0 ? index : 1;
            this.$refs.xTree.setTreeExpand(this.siteList[index], true);
            this.$refs.xTree.setCurrentRow(this.siteList[index]);
            // this.$refs.xTree.setTreeExpand(this.siteList[index], true);
          });
        });
    },
    getTreeExpand() {
      let index = this.siteList?.findIndex((item) => {
        return item.siteId == (this.siteRow?.siteId || this.depRow?.siteId);
      });
      return index;
    },
    //获取栏目列表
    clickListRow(row) {
      this.rowCache = row;
      if (row.depId && row.siteId) {
        this.siteRow = row;
        this.depRow = row;

        this.haldleClickColumn();
      } else if (row.siteId) {
        this.siteRow = row;
        this.depRow = null;
        this.haldleClickSite();
      }
    },
    //点击部门
    haldleClickColumn() {
      if (this.subDepOption.length == 0) {
        listDep({ siteId: this.depRow.siteId }).then((res) => {
          this.subDepOption = res.data;
        });
      }
      subList({ parentId: this.depRow.depId }).then((res) => {
        // this.$refs.xTree.loadData(res.data);
        this.rightTable = res.data;
      });
    },
    //点击站点
    haldleClickSite() {
      listDep({ siteId: this.siteRow.siteId }).then((res) => {
        this.subDepOption = res.data;
        this.rightTable = res.data;
      });
    },
    //编辑
    handleEdit(row) {
      getDepInfo(row.depId).then((res) => {
        this.form = res.data;
        this.open = true;
        this.title = this.depRow ? "修改部门" : "修改类别";
      });
    },
    //删除
    handleDel(row) {
      this.$confirm(
        `是否确认删除${this.depRow ? "部门名称" : "类别名称"} ${
          row.name
        } 的数据项?`,
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          if (this.depRow) {
            delDepRight(row.depId).then((res) => {
              if (res.code == 200) {
                this.msgSuccess("删除成功");
                //重新调用左方法

                this.haldleClickColumn();
              }
            });
          } else {
            delDepLeft({ depIds: row.depId }).then((res) => {
              if (res.code == 200) {
                this.msgSuccess("删除成功");
                //重新调用左方法
                this.haldleClickSite();
                this.getLeftList();
                //左侧列表还得变
              }
            });
          }
        })

        .catch(() => {});
    },
    //新增
    handleAdd() {
      this.getTreeExpand();
      this.title = this.depRow ? "新建部门" : "新建部门类别";
      this.open = true;
    },
    //对话框确认
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.depId) {
            departmentEdit(this.form).then(() => {
              this.msgSuccess("修改成功");
              this.getLeftList();
              this.clickListRow(this.rowCache);
              this.cancel();
            });
          } else {
            this.form.siteId = this.siteRow?.siteId || this.depRow.siteId;
            departmentAdd(
              objectMerge(this.form, {
                parentId: this.depRow ? this.depRow.depId : 0,
              })
            ).then(() => {
              this.msgSuccess("新增成功");
              this.cancel();
              !this.depRow && this.getLeftList();
              this.clickListRow(this.rowCache);
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        parentId: 0,
      };
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.complaints {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  position: relative;
  border: 1px solid #ccc;
  .complaints_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }
  .complaints_r {
    overflow: overlay;
    overflow: auto;
    width: 100%;
    padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;
    background: #f4f4f4;
  }
}
</style>
